<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<z-tabs :list="tabList" @change="tabsChange" />
		</template>

		<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

		<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
		<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->

		<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
			<view class="itembox">
				<image v-if="item.sfjz == '01'" class="jizhen" src="/static/home/jizhen.png" mode="aspectFit"></image>
				<fui-text fontWeight="600" :size="32" :text="item.brXm"></fui-text>
				<view class="item-detail">
					<view class="let-box">
						<fui-text :size="28" text="年龄："></fui-text>
						<fui-text fontWeight="600" :size="28" :text="item.jdryInfo.age"></fui-text>
					</view>
					<view class="right-box">
						<fui-text :size="28" text="性别："></fui-text>
						<fui-tag theme="light" :text="getTag('5.1.46',item.jdryInfo.xb)" :scaleRatio="0.8" :padding="['10rpx','24rpx']" :size="28"></fui-tag>
					</view>
				</view>
				<view class="item-detail">
					<view class="let-box">
						<fui-text :size="28" text="部门："></fui-text>
						<fui-text fontWeight="600" :size="28" :text="item.jdryInfo.deptName"></fui-text>
					</view>
				</view>
				<view class="item-detail">
					<view class="let-box" >
						<fui-text :size="28" text="就诊号："></fui-text>
						<fui-text fontWeight="600" :size="28" :text="item.blh"></fui-text>
						<view @tap.stop="copyAction(item)">
							<fui-icon class="letsyze" name="order" :size="40"></fui-icon>
						</view>
					</view>
				</view>
				<view class="item-detail">
					<view class="let-box">
						<fui-text :size="28" text="就诊时间："></fui-text>
						<fui-text fontWeight="600" :size="28" :text="jiuZhenDate(item.jzrq)"></fui-text>
					</view>
				</view>
				
			</view>

		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs';
	import { getTag } from '@/utils/Tools.js'
	
	const {
		proxy
	} = getCurrentInstance(); //获取上下文实例，ctx=vue2的this,=>proxy.tui

	const paging = ref(null)
	const dataList = ref([])
	const tabList = ref(['待诊', '已诊'])
	const tabIndex = ref(0)
	
	onLoad(() =>{
		// console.log(uni.getStorageSync('tagData'));
	})
	const tabsChange = (index) => {
		tabIndex.value = index;
		//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
		//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
		paging.value.reload(true);
	}
	//获取数据
	const getXB = (dictType, value) =>{
		
	}

	const itemClick = (item) => {
		uni.navigateTo({
			url: `/pages/index/outpatient/peopleInformation?brId=${item.brId}&id=${item.id}`
		})
	}

	const copyAction = (item) => {
		uni.setClipboardData({
			data: item.blh, // 要复制的内容
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 2000,
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 2000,
				});
			},
		});
	}

	const queryList = (pageNo, pageSize) => {
		// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 模拟请求服务器获取分页数据，请替换成自己的网络请求		
		const params = {
			pageNo: pageNo,
			pageSize: pageSize,
			jzzt: tabIndex.value == 0 ? 0 : 9,
			zyzt: 'zy'
		}
		proxy.http.get('/ylgl/jzjl/page', {
			brief: true,
			data: params
		}).then(res => {
			// res.list.forEach(element => {
			// 	const dateString = dayjs(element.jzrq).format('YYYY-MM-DD HH:mm:ss');
			// 	console.log(dateString);
			// });			
			paging.value.complete(res.list);
		}).catch(e => {
			paging.value.complete(false);
			console.log(e)
		})
	}

	const jiuZhenDate = (date) => {
		return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		position: relative;

		.itembox {
			width: 100%;
			height: 100%;
			background-color: white;
			border-radius: 16rpx;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			position: relative;

			.jizhen {
				position: absolute;
				top: 0;
				right: 0;
				width: 80rpx;
				height: 50rpx;
			}

			.item-detail {
				width: 100%;
				height: 30rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.let-box {
					flex: 1;
					height: 30rpx;
					display: flex;
					align-items: center;

					.letsyze {
						margin-left: 10rpx;
					}
				}

				.right-box {
					width: 50%;
					height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>